<template>
    <div class="father">
        <h3>父组件</h3>
        <div class="content">
            <Game>
                <template v-slot:a="params">
                    <ul>
                        <li v-for="g in params.youxi" :key="g.id">{{ g.name }}</li>
                    </ul>
                </template>
            </Game>
            <Game> <template v-slot:a="params">
                    <ol>
                        <li v-for="g in params.youxi" :key="g.id">{{ g.name }}</li>
                    </ol>
                </template>
            </Game>
            <Game>
                <!-- 结构赋值 -->
                <template v-slot:a="{youxi}">
                    <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
                </template>
            </Game>
        </div>
    </div>
</template>

<script setup lang="ts" name="Father">
import Game from "./Game.vue";
</script>

<style  scoped>
.father {
    background-color: reb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
}

.content {
    display: flex;
    justify-content: space-evenly;
}

video,
img {
    width: 100%;
}
</style>